<template>
  <div class="fm">
    <!-- 电台FM -->
    <ul>
      <li
        class="fms"
        v-for="item in personalfm"
        :key="item.id"
        @click="gosongDetail(item.id)"
      >
        <img :src="item.album.picUrl" alt="" />
        <div class="lists">
          <span class="songname">{{ item.name }}</span>
          <div class="singers">
            <span class="quality">SQ</span>
            <span class="singername" v-for="v in item.artists" :key="v.id">
              - {{ v.name }}</span
            >
          </div>
        </div>
        <van-icon name="play-circle-o" size="21" color="#B3B3B3" />
        <van-icon name="weapp-nav" class="weapp" />
      </li>
    </ul>
    <div class="bottom">私人订制，想你所想</div>
  </div>
</template>

<script>
import { privateFM } from "../../api/home";
export default {
  name: "fm",
  data() {
    return {
      personalfm: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    //电台FM
    this.privAteFM();
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    async privAteFM() {
      const res = await privateFM();
      console.log(res);
      this.personalfm = res.data;
    },
    //点击跳转歌曲详情
    gosongDetail(id) {
      this.$router.push(`/songdetail/${id}`);
    },
  },
};
</script>

<style scoped>
.fm {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 10px;
}
.fm img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  vertical-align: middle;
}
.fm li {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}
.lists {
  height: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-content: center;
}
.songname {
  text-indent: 0.5em;
}
.singers {
  width: 220px;
  display: flex;
  font-size: 12px;
  color: #9e9e9e;
  text-indent: 0.3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.quality {
  margin-left: 9px;
  color: #ff6b6b;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid #ffdddd;
  border-radius: 3px;
  padding: 2px 3px;
  text-align: center;
  text-indent: 0em;
}
.singername {
  line-height: 19px;
}
.weapp {
  margin-left: 20px;
  margin-right: 10px;
}
.bottom {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 10px;
}
</style>
